<template>
  <Col :xs="24" :sm="12" :md="10" :lg="6">
    <Row>
      <Col :xs="labelXs" :sm="labelSm" :md="labelMd" :lg="labelLg" :style="{textAlign: 'right'}">{{label}}</Col>
      <Col :xs="17" :sm="15" :md="15" :lg="16">
        <slot />
      </Col>
    </Row>
  </Col>
</template>

<script>
import { Row, Col } from "view-design";
export default {
  name: "SearchBarItem",
  components: { Row, Col },
  props: {
    label: { type: String, required: true },
    labelXs: { type: Number, required: false, default: 7 },
    labelSm: { type: Number, required: false, default: 8 },
    labelMd: { type: Number, required: false, default: 8 },
    labelLg: { type: Number, required: false, default: 7 }
  }
};
</script>

<style>
</style>
